<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言鼓励</title>
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/css/default.css">
    <link rel="stylesheet" href="/css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="/css/style.css"> <!-- Resource style -->
    <link rel="stylesheet" href="/css/layer.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="/js/layer.js"></script>
</head>
<style>
    .cd-label{
        color:#151515;
        font-size: 2.3rem;
    }
</style>
<body style="background-image: url('/music/back4.jpg');background-repeat: no-repeat;">
<!--<body style="background: #2F4056">-->
<div class="container">
    <div class="cd-form floating-labels">
        <fieldset>
            <input type="submit" value="返回" style="background: #a1a7ab;float: left;" onclick="returnPrev()" >
        </fieldset>
        <fieldset>
            <div>
                <ul class="cd-form-list">
                    <li>
                        <input type="radio" name="radio-button" class="cd-radio" value="0" checked>
                        <label for="cd-radio-1">不匿名留言</label>
                    </li>
                    <li>
                        <input type="radio" name="radio-button" class="cd-radio" value="1">
                        <label for="cd-radio-2">匿名留言</label>
                    </li>
                </ul>
            </div>
            <div class="icon" id="comment_name">
                <label class="cd-label" for="cd-name" style="color:#151515;font-size: 2.3rem;">留言人姓名</label>
                <input class="user" type="text" name="cd-name" id="cd-name" required style="border-color: #020202;">
            </div>
            <div class="icon">
                <label class="cd-label" for="cd-textarea" style="color:#151515;font-size: 2.3rem;">留个言吧</label>
                <textarea class="message" name="cd-textarea" id="cd-textarea" required style="border-color: #020202;"></textarea>
            </div>
            <div>
                <input type="submit" value="发表" style="background: #a1a7ab;" onclick="toComment()" >
            </div>
        </fieldset>
    </div>
</div>
<script>
    var index = 0;
    $(".cd-radio").click(function(){
        index = $(this).val();
        if(index == 1) $("#comment_name").hide();
        else $("#comment_name").show();
    })

    // 返回上一级
    function returnPrev(){
        window.location.href='/index/Index/index';
    }
    //
    function toComment(){
        var comment = $(".message").val();
        var name = $(".user").val();

        if(index == 1) name = 1; // 匿名
        else{
            if(!lengthValidate(name,20)){
                layer.open({
                    content: '姓名过长或过短'
                    ,skin: 'msg'
                    ,time: 3
                });
            }
        }
        if(lengthValidate(comment,125) == false){
            layer.open({
                content: '留言过长或过短'
                ,skin: 'msg'
                ,time: 3
            });
        }
        else{
            $.ajax({
                url:"/index/Index/insertComment",
                type:"POST",
                data:{name:name,comment:comment},
                success:function(res){
                    if(res == 1){
                        layer.open({
                            content: '您已成功为‘小可儿’加油助力'
                            ,skin: 'msg'
                            ,time: 3
                        });
                        window.location.href='/index/Index/index';
                    }
                    else{
                        layer.open({
                            content: '留言失败喽'
                            ,skin: 'footer'
                        });
                    }
                },
                error:function(error){
                    layer.open({
                        content: '您输入的内容对网站有威胁'
                        ,skin: 'footer'
                    });
                }
            });
        }

    }

    function lengthValidate(str,len){
        if(str.length > 0 && str.length < len) return true;
        else return false;
    }
</script>

</body>
</html>